<script setup>
    import {useBanner} from './composables/useBanner'
    import {useCategory} from './composables/useCategory'

    import GoodsItem from '@/views/Home/components/GoodsItem.vue'

    const {bannerList} = useBanner()
    
    const {categoryData} = useCategory()

    
   

    



</script>


<template>
    <div class="top-category">
        <div class="container">
            <!-- 面包屑导航 -->
            <div class="bread">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{categoryData.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- banner -->
            <div class="home-banner">
                <el-carousel height="509.4px">
                    <el-carousel-item v-for="item in bannerList" :key="item">
                        <img :src="item.imgUrl" alt="">
                    </el-carousel-item>
                </el-carousel> 
            </div>
            <!-- 全部分类 -->
            <div class="top-list">
                <h3>全部分类</h3>
                <ul>
                    <li v-for="item in categoryData.children" :key="item.id">
                        <RouterLink :to="`/layout/category/sub/${item.id}`">
                            <img :src="item.picture" alt="">
                            <p>{{ item.name }}</p>
                        </RouterLink>
                    </li>
                    
                </ul>
            </div>
            <!-- goods -->
            <div class="goods" v-for="item in categoryData.children" :key="item.id">
                <h3>- {{item.name}} -</h3>
                <ul>
                    <li v-for="good in item.goods" :key="good.id">
                        <goods-item :good="good"></goods-item>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .top-category{
         h3{
                    text-align: center;
                    font-weight: normal;
                    font-size: 28px;
                    padding: 30px 0;
                    color: #666;
        }
        .container{
            .bread{
                padding: 25px 0;
            }
            .home-banner{
                
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .top-list{
                background: #fff;
                margin-top: 20px;
               
                ul{
                    display: flex;
                    padding: 0 32px;
                    li{
                        width: 168px;
                        height: 160px;
                        text-align: center;
                        a{
                            img{
                                width: 100px;
                                height: 100px;
                            }
                            p{
                                font-size: 16px;
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }
            .goods{
                background: #fff;
                margin-top: 20px;
                ul{
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
    }
</style>